<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form :model="applyModel" :rules="rules" label-width="110px" ref="form">
      <!-- 实体ID策略审批 -->
      <el-row v-if="rowType === 'ID_STRATEGY'">
        <el-col :span="8">
          <el-form-item label="实体注记">
            <el-input v-model.trim="applyModel.strategyName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优先级" class="status">
            <el-select clearable placeholder="请选择" v-model="applyModel.priorityNo" disabled>
              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in $common.priorityList()"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实体类型" class="status">
            <el-select v-model="applyModel.entityType" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('EntityType')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实体编码" class="status">
            <el-input v-model.trim="applyModel.entityCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人代号">
            <el-input v-model.trim="applyModel.operatorCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="策略状态" class="status">
            <el-select v-model="applyModel.commonState" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 分案日期策略 -->
      <el-row v-if="rowType === 'CASE_DATE_STRATEGY'">
        <el-col :span="8">
          <el-form-item label="策略代码">
            <el-input v-model.trim="applyModel.strategyNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="策略名称">
            <el-input v-model.trim="applyModel.strategyName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期">
            <el-tooltip class="item" effect="dark" :content="applyModel.operationDate" placement="top-start">
              <el-input v-model.trim="applyModel.operationDate" disabled></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="策略状态" class="status">
            <el-select v-model="applyModel.state" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态" class="status">
            <el-select v-model="applyModel.applyStatus" disabled>
              <el-option :key="index" :label="item.name" :value="item.code" v-for="(item, index) in $dict.getDictData('ApplyStatus')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人代号">
            <el-input v-model.trim="applyModel.operatorCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分案状态">
            <el-input v-model.trim="applyModel.divisionState" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 规则剔除策略审批 -->
      <el-row v-if="rowType === 'RULE_ELIMINATE'">
        <el-col :span="8">
          <el-form-item label="策略代码">
            <el-input v-model.trim="applyModel.strategyNo" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="策略名称">
            <el-input v-model.trim="applyModel.strategyName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态" class="state">
            <el-select v-model="applyModel.applyStatus" disabled>
              <el-option :key="index" :label="item.name" :value="item.code" v-for="(item, index) in $dict.getDictData('ApplyStatus')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="策略状态" class="status">
            <el-select v-model="applyModel.state" disabled>
              <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="剔除渠道选择" v-if="rowType === 'RULE_ELIMINATE'">
        <data-box :data="strategyDataSelect" class="data-box-padding">
          <template slot="columns">
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="剔除渠道" prop="channel" show-overflow-tooltip :formatter="(row) => $filter.dictConvert(row.channel,'ChannelType')"></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="有效日期" prop="expiryDate" show-overflow-tooltip :formatter="(row) => $filter.dateFormat(row.expiryDate)"></el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <!-- 名单客户剔除审批 -->
      <div v-if="rowType === 'NAMELIST_USER_ELIMINATE'">
        <h4 class="head-title">基础信息展示</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户姓名" class="form-name">
              <el-input v-model.trim="customName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户号" class="form-name">
              <el-input v-model.trim="applyModel.customerNo" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <h4 class="head-title">客户名下账户信息</h4>
        <data-box :data="accountMsgArr" class="data-box-padding data-box-style">
          <template slot="columns">
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="账户号" prop="caseNumber" show-overflow-tooltip></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="产品类型" prop="productType" show-overflow-tooltip></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期阶段" prop="overdueStage" show-overflow-tooltip>
              <template slot-scope="scope">{{
                `${scope.row.overduePeriod}`
                  ? `M${scope.row.overduePeriod}`
                  : ""
              }}</template>
            </el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期金额" prop="overdueAmount" show-overflow-tooltip></el-table-column>
          </template>
        </data-box>
        <el-form-item label="账户选择">
          <data-box :data="strategyDataSelect" class="data-box-padding">
            <template slot="columns">
              <el-table-column :min-width="$helper.getColumnWidth(3)" label="账户号" prop="caseNumber" show-overflow-tooltip></el-table-column>
              <el-table-column :min-width="$helper.getColumnWidth(3)" label="剔除渠道" prop="channelType" show-overflow-tooltip :formatter="(row) => $filter.dictConvert(row.channelType,'ChannelType')"></el-table-column>
              <el-table-column :min-width="$helper.getColumnWidth(3)" label="有效日期" prop="effectiveTime" show-overflow-tooltip :formatter="(row) => $filter.dateTimeFormat(row.effectiveTime)"></el-table-column>
            </template>
          </data-box>
        </el-form-item>
        <el-form-item label="剔除注记">
          <el-input :value="applyModel.remark" readonly type="textarea" :maxlength="300" show-word-limit></el-input>
        </el-form-item>
      </div>
      <!-- 账户剔除审批 -->
      <div v-if="rowType === 'NAMELIST_ACCOUNT_ELIMINATE'">
        <h4 class="head-title">基础信息展示</h4>
        <el-row>
          <el-col :span="8">
            <el-form-item label="账户号" class="form-name">
              <el-input v-model.trim="applyModel.caseNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="还款日" class="form-name">
              <!-- <el-input :value="$filter.dateFormat(accountMsgArrByAccount.payDate)" disabled></el-input> -->
              <!-- <number-range v-model="accountMsgArrByAccount.payDate"></number-range> -->
              <el-input type="number" v-model="accountMsgArrByAccount.payDate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户姓名" class="form-name">
              <el-input v-model.trim="accountMsgArrByAccount.personalName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户号" class="form-name">
              <el-input v-model.trim="applyModel.customerNo" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="剔除渠道选择">
          <data-box :data="strategyDataSelect" class="data-box-padding">
            <template slot="columns">
              <el-table-column :min-width="$helper.getColumnWidth(3)" label="剔除渠道" prop="channelType" show-overflow-tooltip :formatter="(row) => $filter.dictConvert(row.channelType,'ChannelType')"></el-table-column>
              <el-table-column :min-width="$helper.getColumnWidth(3)" label="有效日期" prop="effectiveTime" show-overflow-tooltip :formatter="(row) => $filter.dateTimeFormat(row.effectiveTime)"></el-table-column>
            </template>
          </data-box>
        </el-form-item>
        <el-form-item label="剔除原因">
          <el-input :value="applyModel.remark" disabled type="textarea" :maxlength="300" show-word-limit></el-input>
        </el-form-item>
      </div>
      <div class="row" v-if="rowType === 'ID_STRATEGY' || rowType === 'RULE_ELIMINATE'">
        <span>设置获取数据规则</span>
        <expression-base v-if="rowType === 'ID_STRATEGY' || rowType === 'RULE_ELIMINATE'" v-model="strategyDataSet" :disabledData="disabledData" class="set-data" :entityIdStr='rowType' :flag="rowType !== 'RULE_ELIMINATE'"></expression-base>
      </div>
      <el-form-item label="申请原因" v-if="rowType !== 'NAMELIST_USER_ELIMINATE' && rowType !== 'NAMELIST_ACCOUNT_ELIMINATE' && rowType !== 'RULE_ELIMINATE' && rowType !== 'ID_STRATEGY'">
        <el-input v-model.trim="applyModel.remark" disabled type="textarea" :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="申请原因" v-if="rowType === 'ID_STRATEGY'">
        <el-input v-model.trim="applyModel.strategyNotes" disabled type="textarea" :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="策略注记" v-if="rowType === 'RULE_ELIMINATE'">
        <el-input v-model.trim="applyModel.remark" disabled type="textarea" :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-col :span="8" v-if="rowType === 'NAMELIST_USER_ELIMINATE' || rowType === 'NAMELIST_ACCOUNT_ELIMINATE'">
        <el-form-item label="策略状态" class="status">
          <el-select v-model="applyModel.strategyState" disabled>
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('CommonState')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-if="rowType === 'NAMELIST_USER_ELIMINATE' || rowType === 'NAMELIST_ACCOUNT_ELIMINATE'">
        <el-form-item label="审批状态" class="state">
          <el-select v-model="applyModel.applyStatus" disabled>
            <el-option :key="index" :label="item.name" :value="item.code" v-for="(item, index) in $dict.getDictData('ApplyStatus')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="申请人" v-if="rowType === 'RULE_ELIMINATE' || rowType === 'NAMELIST_USER_ELIMINATE' || rowType === 'NAMELIST_ACCOUNT_ELIMINATE'">
          <el-input v-model.trim="rowName" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-form-item label="审批历史">
        <data-box :data="recordHistory" class="data-box-padding">
          <template slot="columns">
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批人" prop="approvalRealName" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)" label="审批时间" prop="approvalTime" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(3)" label="审批结果" prop="applyStatus" show-overflow-tooltip></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批意见" prop="approvalOpinion" show-overflow-tooltip></el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinion" v-if="rowData.applyStatus==='PENDING' && rowData.checkUserLinkedList.includes(userId) && type === '审批'">
        <el-input :disabled="applyModel.applyStatus!=='PENDING'" type="textarea" v-model.trim="applyModel.approvalOpinion" clearable :maxlength="300" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button" v-if="rowData.applyStatus==='PENDING'  && rowData.checkUserLinkedList.includes(userId) && type === '审批'">
      <el-button @click="commit('REJECT')">拒绝</el-button>
      <el-button @click="commit('PASS')">同意</el-button>
    </div>
    <div class="confirm-button" v-else>
      <el-button @click="close">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Dependencies } from "~/core/decorator"
import { Emit, Prop, Watch } from "vue-property-decorator"
import { State, Getter, Action, namespace } from "vuex-class"
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service"
import ExpressionBase from "~/components/strategic-manage/expression-base.vue"
import { IstrategyInfo } from "~/components/strategic-manage/strategy-helper.config";
import { NameListEliminateStrategyService } from "~/services/domain-service/name-list-eliminate-strategy.service"
import { Form } from 'element-ui'

@Component({
  components: {
    ExpressionBase
  }
})
export default class CaseApprovalCommon extends Vue {
  public $refs: { form: Form }
  @Dependencies(CaseApplyRecordService) private caseApplyRecordService: CaseApplyRecordService
  @Dependencies(NameListEliminateStrategyService) private NameListEliminateStrategyService: NameListEliminateStrategyService
  @State private userData

  private accountMsgArr: any[] = []
  private perDueDate
  private accountMsgArrByAccount: any = {}
  private rules: any = {
    applyStatus: [{ required: true, message: "请选择审批状态" }],
    approvalOpinion: [{ required: true, message: "请输入审批意见" }]
  }
  private applyModel: any = {
    applyStatus: "PASS",
    approvalOpinion: "",
    id: ""
  }

  @Prop({ required: true }) private type: string
  @Prop({ required: true }) private rowName: string
  @Prop({ required: true }) private rowId: string
  @Prop({ required: true }) private recordHistory: any
  @Prop({ required: true }) private rowData: any
  @Prop({ required: true }) private rowType: string

  @Watch("rowData", { immediate: true })
  private idChange (value) {
    this.$nextTick(() => {
      this.applyModel = { 
        ...this.rowData, 
        divisionState: this.rowData.operationDate === "32" ? '暂不分案' : '执行分案', 
        operationDate: this.rowData.operationDate === '32' ? '-' : this.rowData.operationDate 
      }
    })

    if (this.rowType === 'NAMELIST_USER_ELIMINATE' && this.applyModel.customerNo !== undefined) {
      this.getAccountMsg()
    } else if (this.rowType === 'NAMELIST_ACCOUNT_ELIMINATE' && this.applyModel.caseNumber !== undefined) {
      this.getAccountMsgByAccount()
    }
  }

  @Emit("close") private close () {
    this.reset()
  }

  // private filterDate () {
  //   return this.rowData.operationDate === '32' ? '-' : this.rowData.operationDate
  // }

  private mounted () {
    this.applyModel = { ...this.rowData }
  }

  private get strategyDataSet () {
    if (!this.applyModel.formulaJson) return [];
    // return JSON.parse(this.applyModel.formulaJson) as IstrategyInfo[];
    const val = JSON.parse(this.applyModel.formulaJson)
    const tabVal = val[0].value.split(",").map(x => Number.parseInt(x))
    val[0].value = tabVal
    return val
  }

  private set strategyDataSet (value) {
    this.applyModel.formulaJson = JSON.stringify(value);
  }

  private get disabledData () {
    // return  this.applyModel.applyStatus !== 'PENDING'
    return true
  }

  private get strategyDataSelect () {
    if (!this.applyModel.channelJson) return [];
    return JSON.parse(this.applyModel.channelJson) as IstrategyInfo[];
  }

  private get userId () {
    return this.userData.id
  }

  private get customName () { // 客户名称
    if (this.accountMsgArr.length !== 0) {

      return this.accountMsgArr[0].personalName
    }
  }

  private getAccountMsg () { // 通过客户号获取账户信息
    this.NameListEliminateStrategyService.findCaseInfoByCustomerNo({ customerNo: this.applyModel.customerNo }).subscribe(
      data => {
        if (data) {
          this.accountMsgArr = Array.from(data)

        }
      })
  }

  private getAccountMsgByAccount () { // 通过账户号获取账户信息
    this.NameListEliminateStrategyService.findCaseInfoByCaseNumber({ caseNumber: this.applyModel.caseNumber }).subscribe(
      data => {
        if (data) {
          this.accountMsgArrByAccount = data
        }
      })
  }

  private reset () {
    this.$refs.form.resetFields()
  }

  private async commit (applyStatus) {
    const result = await this.$refs.form.validate().then(() => true).catch(() => false)
    if (!result) return
    this.applyModel.applyStatus = applyStatus
    this.applyModel.id = this.rowId.split(',')
    this.caseApplyRecordService.dealApply(this.applyModel).subscribe(
      data => {
        this.$message.success("操作成功")
        this.close()
      },
      err => {
        this.applyModel.id = this.rowData.id
        this.close()
      }
    )
  }

  private annexCheckClick (row) { // 附件查看
    window.open(row.url, row.fileName)
  }
}
</script>

<style lang="less" scoped>
.head-title {
  margin-left: 24px;
}
/*deep*/
.form-name {
  display: inline-block;
  min-width: 40%;
}
/*deep*/
.el-select, /*deep*/.el-input {
  width: 100% !important;
}
/*deep*/
.el-select-dropdown {
  width: 100% !important;
}
.month-input {
  width: 50px !important;
  margin-left: 30px;
  margin-right: 10px;
}
</style>
<style lang="less">
/*deep*/
.status .el-input {
  width: 100% !important;
}
.component.case-approval-common {
  .set-data {
    width: 85%;
  }
  .data-box > * {
    padding: 0 !important;
  }
}
.data-box-padding {
  padding: 0 !important;
}
.data-box-style {
  width: 87%;
  margin-left: 110px;
}
</style>
<style lang="less">
.case-approval-common {
  .el-dialog__body {
    padding: 30px 70px !important;
  }
}
/*deep*/
.select-width .el-input {
  width: 100% !important;
}
/*deep*/
.set-data .el-form-item__content {
  margin-left: 0 !important;
}
</style>
